import React from 'react'
import { Form, Input, Button, message, Icon } from 'antd'
import Footer from '../../components/Footer'
import './index.less'
import { axhttp } from '../../utils/axhttp'
import { LoginHeader } from '../../components/Header'
const FormItem = Form.Item;

export default class Login extends React.Component {
    state = {};

    /** 添加处理函数 */
    loginReq = (params) => {
        axhttp.loginXhr('/api/user/read', params).then((res) => {
            if (res.list.length > 0) {
                localStorage.setItem('is_login_timestamp', Date.now());
                localStorage.setItem('login_user_info', JSON.stringify(res.list[0]));
                window.location.href = '/#/home';
            }
            else {
                message.error('用户名或者密码不正确！');
            }
        });
    }

    render() {
        return (
            <div className="login-page">
                <LoginHeader />
                <div className="login-content-wrap">
                    <div className="login-content">
                        <div className="word">共享出行 <br />引领城市新经济</div>
                        <div className="login-box">
                            <div className="error-msg-wrap">
                                <div
                                    className={this.state.errorMsg ? "show" : ""}>
                                    {this.state.errorMsg}
                                </div>
                            </div>
                            <div className="title">慕课欢迎你</div>
                            <LoginForm ref="login" loginSubmit={this.loginReq} />
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}

class LoginForm extends React.Component {
    state = {};

    loginSubmit = (e) => {
        e && e.preventDefault();
        const _this = this;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                var formValue = _this.props.form.getFieldsValue();
                _this.props.loginSubmit({
                    username: formValue.username,
                    password: formValue.password
                });
            }
        });
    };

    checkUsername = (rule, value, callback) => {
        var reg = /^\w+$/;
        if (!value) {
            callback('请输入用户名!');
        } else if (!reg.test(value)) {
            callback('用户名只允许输入英文字母');
        } else {
            callback();
        }
    };

    checkPassword = (rule, value, callback) => {
        if (!value) {
            callback('请输入密码!');
        } else {
            callback();
        }
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <frameElement>
                <Form className="login-form">
                    <FormItem>
                        {
                            getFieldDecorator('username', {
                                initialValue: '',
                                rules: [
                                    {
                                        required: true,
                                        message: '用户名不能为空'
                                    },
                                    // {
                                    //     min: 5, max: 10,
                                    //     message: '长度不在范围内'
                                    // },
                                    // {
                                    //     pattern: new RegExp('^\\w+$', 'g'),
                                    //     message: '用户名必须为字母或者数字'
                                    // }
                                ]
                            })(
                                <Input prefix={<Icon type="user" />} placeholder="请输入用户名" />
                            )
                        }
                    </FormItem>
                    <FormItem>
                        {
                            getFieldDecorator('password', {
                                initialValue: '',
                                rules: []
                            })(
                                <Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
                            )
                        }
                    </FormItem>
                    <FormItem>
                        <Button type="primary" onClick={this.loginSubmit} className="login-form-button">
                            登录
                    </Button>
                    </FormItem>
                </Form>
                <div>
                    <a>忘记密码</a> <a style={{ float: 'right' }} href="/#/register">立即注册</a>
                </div>
                <div>

                </div>
            </frameElement>
        )
    }
}
LoginForm = Form.create({})(LoginForm);
